* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: '幼圆';
}

.box {
  width: 130px;
  height: 50px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  margin: 100px auto;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  transition: all 1s;
}

.box:hover {
  animation: shake .7s linear;
  background-color: lavender;
  color: #409EFF;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-1px);
  }

  20% {
    transform: translateX(2px);
  }

  30% {
    transform: translateX(-4px);
  }

  40% {
    transform: translateX(4px);
  }

  50% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(4px);
  }

  70% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(2px);
  }

  90% {
    transform: translateX(-1px);
  }

  100% {
    transform: translateX(0);
  }
}